<template>
	<view class="passWordBox ">
		<view class="content df-Jc-sb">
			<view class="contentBox df-Jc-c df-c" v-for="(item,index) in maxlength" :key="index"
				:style="[...itemStyle]">
				<view class="val" v-if="!showDot">
					<text>{{list[index]}}</text>
				</view>
				<view class="dot" v-if="showDot&&list[index]" :style="{background:color}" />

				<view class="icon_focus" v-if="isFocus && list.length === index" />
			</view>
		</view>
		<input type="number" v-model="inputValue" @input="change" @focus="isFocus = true" @blur="isFocus = false"
			:maxlength="maxlength">
	</view>
</template>

<script>
	export default {
		props: {
			maxlength: {
				type: Number,
				default: 6
			},
			value: {
				type: String,
				default: ''
			},
			borderColor: {
				type: String,
				default: '#EDEDED'
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			showDot: {
				type: Boolean,
				default: false
			},
			color: {
				type: String,
				default: '#000000'
			},
		},
		data() {
			return {
				isFocus: false,
				inputValue: ''
			}
		},
		computed: {
			list() {
				return String(this.inputValue).split('')
			},
			itemStyle() {
				let data = {}
				if (this.borderColor) data['border'] = `1rpx solid ${this.borderColor}`
				if (this.bgColor) data['background'] = this.bgColor
				return data
			},
		},
		methods: {
			change(e) {
				this.$nextTick(() => {
					const value = e.detail.value.replace(/\./g, '')
					this.inputValue = value.replace(/[^\d.]/g, '')
					this.$emit('input', this.inputValue)
					if (this.inputValue.length == this.maxlength) this.$emit('over', this.inputValue)
				});

			}
		}

	}
</script>

<style lang="scss" scoped>
	.passWordBox {
		z-index: 1;
		position: relative;

		.content {
			background: #FFFFFF;
			pointer-events: none;
			z-index: 2;

			.contentBox {
				@include boxs(80rpx, 80rpx, 10);

				.val {
					@include fz(26rpx, false, 80, true);
				}

				.dot {
					margin: auto;
					@include boxs(20%, 20%);
					border-radius: 50rpx
				}

				.icon_focus {
					@include boxs(4rpx, 50%);
					margin: 0 auto;
					background: #C9CACC;
					animation-name: example;
					animation-duration: .6s;
					animation-direction: alternate;
					animation-iteration-count: infinite
				}

				/* 动画代码 */
				@keyframes example {
					from {
						opacity: 0;
					}

					to {
						opacity: 1;
					}

				}

			}
		}


		input {
			padding: 0 4rpx;
			z-index: -1;
			top: 0;
			left: 0;
			position: absolute;
			@include boxs(100%, 80rpx);
		}
	}
</style>
